<template>
	<view class="container">
		<text class="title">膜品天下电子质保查询</text>
		<view class="container_container" v-for="(item,index) in listData" :key="index">
			<view class="quality_div">
				<view class="title_div">
					<text class="title_div_text">授权区域信息</text>
				</view>
				<view class="body_div">
					 <view class="body_left">
						 <text>授权区域：</text>
						 <text>授权经销商：</text>
						 <text>产品型号：</text>
						 <text>产品编号：</text>
						 <text>质保年限：</text>
					 </view>
					 <view class="body_right">
						 <text>{{item.auth_area}}</text>
						 <text>{{item.auth_store}}</text>
						 <text>{{item.product_type}}</text>
						 <text>{{item.product_id}}</text>
						 <text>{{item.quality_year}}</text>
					 </view>
				</view>
			</view>
			<view class="quality_div">
				<view class="title_div">
					<text class="title_div_text">车主信息</text>
				</view>
				<view class="body_div">
					 <view class="body_left">
						 <text>车主姓名：</text>
						 <text>车主手机号：</text>
					 </view>
					 <view class="body_right">
						 <text>{{item.car_user_name}}</text>
						 <text>{{item.car_user_mobile}}</text>
					 </view>
				</view>
			</view>
			<view class="quality_div">
				<view class="title_div">
					<text class="title_div_text">车辆信息</text>
				</view>
				<view class="body_div">
					 <view class="body_left">
						 <text>品牌型号：</text>
						 <text>车牌号：</text>
						 <text>车架号：</text>
						 <text>车身颜色：</text>
					 </view>
					 <view class="body_right">
						 <text>{{item.car_type}}</text>
						 <text>{{item.car_id}}</text>
						 <text>{{item.car_case_id}}</text>
						 <text>{{item.car_color}}</text>
					 </view>
				</view>
			</view>
			<view class="quality_div">
				<view class="title_div">
					<text class="title_div_text">施工信息</text>
				</view>
				<view class="body_div">
					 <view class="body_left">
						 <text>施工店名：</text>
						 <text>联系方式：</text>
					 </view>
					 <view class="body_right">
						 <text>{{item.build_shop_name}}</text>
						 <text>{{item.build_shop_phone}}</text>
					 </view>
				</view>
			</view>
			<view class="quality_div">
				<view class="title_div">
					<text class="title_div_text">施工项目</text>
				</view>
				<view class="body_div">
					 <view class="body_left">
						 <text>施工项目：</text>
						 <text>施工时间：</text>
						 <text>施工价格：</text>
						 <text>到期时间：</text>
						 <text>备注：</text>
					 </view>
					 <view class="body_right">
						 <text>{{getBuildItemsText(item.build_items_text)}}</text>
						 <text>{{item.build_start_time}}</text>
						 <text>{{item.build_price}}</text>
						 <text>{{item.build_end_time}}</text>
						 <text>{{item.description}}</text>
					 </view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listData:[]
			}
		},
		props: {
			data: {
				type: Array,
				default: []
			}
		},
		methods: {
			getBuildItemsText(text){
				let content = JSON.parse(text);
				let arr = [];
				const keys = Object.keys(content);
				keys.forEach(key => {
					arr.push(content[key])
				});
				return arr.join(',');
			}
		},
		onLoad(options) {
			this.listData = JSON.parse(decodeURIComponent(options.data));
		}
	}
</script>

<style scoped lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		// justify-content: center;
		.container_container{
			margin-bottom: 60rpx;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
	}

	.title {
		line-height: 60rpx;
		font-weight: 500;
	}

	.quality_div {
		width: 90%;
		background-color: #F5F5F5;
		border: 1rpx solid #F5F5F5;

	}

	.title_div {
		height: 40rpx;
	}

	.title_div_text {
		margin-left: 40rpx;
		font-size: 18rpx;
		line-height: 40rpx;
		color: red;
		font-weight: 800;
	}
	.body_div{
		display: flex;
		background-color: white;
		padding: 15rpx;
		text{
			line-height: 40rpx;
			font-size: 18rpx;
			font-weight: 500;
		}
	}
	.body_left{
		width: 35%;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}
	.body_right{
		width: 65%;
		display: flex;
		flex-direction: column;
		text{
			overflow: scroll;
			white-space: nowrap;
		}
	}
</style>